<template>
  <div class="partnerlist">
    <div class="list">
      <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border style="width: 100%" max-height="320">
        <el-table-column type="index" label="ID" width="50" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="70" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="agency_level"
          label="代理级别"
          width="126"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="province"
          label="代理区域"
          width="154"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="manaBounus"
          label="管理津贴"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="soldBounus"
          label="提现金额"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="cash"
          label="销售奖励"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="allcount"
          label="总金额"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="money_opera"
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="qbmx(scope.row)">钱包明细</el-button>
            <p class="cwdk">财务打款</p>
          </template>
          >
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="walletlist_fy">
      <el-pagination
        :page-size="4"
          :current-page.sync="currentPage"
          :page-sizes="[4, 8]"
          layout="total,sizes,prev,pager,next,jumper"
          :hide-on-single-page="false"
          :total="total"
          @size-change="sizeChange"
      >
      </el-pagination>
    </div>

      <!-- 钱包明细弹框 -->
      <el-dialog title="钱包明细" :visible.sync="dialogTableVisible">
        <div class="hx"></div>
        <div>
          <table class="all_tb2">
            <tr>
              <th>总金额</th>
              <!-- <th>总销售奖励</th>
              <th>总管理津贴</th>
              <th>总提现金额</th> -->
              <th>
                <div class="name_input2">
                  收支类型：<input type="text" placeholder="全部" v-model="lxcx"/>
                </div>
              </th>
              <th>
                <!-- 选择日期范围 -->
                收支日期：
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </th>
            </tr>
            <tr>
              <td>{{allJine2}}元</td>
              <!-- <td>0元</td>
              <td>0元</td>
              <td>0元</td> -->
            </tr>
          </table>
        </div>

        <!-- 单选、个人信息 -->
        <div class="partnerlist_xx">
          <span class="srzc">支出\收入:</span>
          <el-radio v-model="radio" label="1">全部</el-radio>
          <el-radio v-model="radio" label="2">支出(10000)元</el-radio>
          <el-radio v-model="radio" label="3">收入(0元)</el-radio>
          <!-- <span class="srzc">个人信息</span> -->
          <el-tooltip
            content="暂无个人信息"
            placement="top"
            effect="light"
            :class="'partnerlist_grxx'"
          >
            <el-button >个人信息</el-button>
          </el-tooltip>

          <!-- 导出数据到Excel、 查询、重置-->
          

          <router-link to="" tag="button" :class="'withdraw_excel3'"
            >导出数据到Excel</router-link
          >
          <el-button  class="reset4">
            <i class="el-icon-refresh-right"></i> 重置</el-button
          >

          <!-- <router-link to="" tag="div" :class="'reset3'">
            <i class="el-icon-refresh-right"></i>重置
          </router-link> -->
          

            <el-button @click="fn1(lxcx)" class="found4">
            <i class="el-icon-search"></i> 查询</el-button
          >

            <!-- <router-link to="" tag="div" :class="'found3'" @click.native="fn1(lxcx)">
              <i class="el-icon-search"></i>查询
            </router-link> -->
          
        </div>

        <!-- 钱包明细表格 -->
        <el-table :data="gridData.slice((currentPage2 - 1) * pageSize2, currentPage2 * pageSize2)" border style="width: 100%">
          <el-table-column type="index" label="ID" width="100" align="center">
          </el-table-column>
          <el-table-column
            prop="newname"
            label="姓名"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="newphone"
            label="电话"
            align="center"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="figure"
            label="金额"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="inOrOut"
            label="收入支出"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="inOutInfo"
            label="收支类型"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="inOutDate"
            label="收支时间"
            width="220"
            align="center"
          >
          </el-table-column>
        </el-table>

        <!-- 分页条 -->
        <el-pagination
          :page-size="4"
          :current-page.sync="currentPage2"
          :page-sizes="[4, 8]"
          layout="total,sizes,prev,pager,next,jumper"
          :hide-on-single-page="false"
          :total2="total2"
          @size-change="sizeChange2"
        >
        </el-pagination>
        <!-- 
        <div class="hx2"></div>
        <div slot="footer" class="partner-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible3 = false"
            >确 定</el-button
          >
        </div> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { Bus } from "../../Bus/index";
import {
  apiGetAgentSum,
  apiGetPartnerSum,
  apiGetKeyNameInfo,
  apiGetParNameInfo,
  apiGetWallettInfo,
  apiGetDateInOut,
} from "@/api/wallet";

export default {
  name: "PartnerList",
  components: {
    // riqi
  },

  data() {
    return {
      lxcx: "", //输入框数据绑定

      alljine: 0,
      allxiaoshou: 0,
      allguanli: 0,
      alltixian: 0,
      alljine2: 0,//钱包明细 总金额

      tableData: [
        {
          agency_level: "市服务站",
        },
      ],
      value1: "",
      radio: "1",

      // 分页
      total: 0,
      pageSize: 4,
      currentPage: 1,

      total2: 0,
      pageSize2: 4,
      currentPage2: 1,

      // 弹框数据
      gridData: [
        {
          wallet_id: 7,
          wallet_name: "中通信通",
          wallet_tel: 13688473206,
          wallet_money: 301,
          income_expend: "支出",
          payment_type: "挂号",
          payment_date: "2020-12-02 17:11:20",
        },
      ],
      dialogTableVisible: false,
    };
  },

  created() {
    this.onload();
  },

  methods: {
    // 分页
    sizeChange(val) {
      this.pageSize = val;
    },
    sizeChange2(val) {
      this.pageSize2 = val;
    },

    // 过滤对象
    filterObj(val) {
      var arr = Object.values(val).filter(function (item) {
        if (item !== "") {
          return true; //过滤掉为空的项
        }
      });
      return arr;
    },

    // 点击 类型 查询
    fn1(val){
      console.log(val);
      let obj = {
        name: val,
      };
      if(!val){
        this.$message({ message: "请输入类型", type: "info" });
      }else{
        apiGetDateInOut(obj).then((res) => {
          // console.log(1515);
          console.log(res);
          // this.tableData = res.tarArr;
          
          this.$message({ message: "查询成功", type: "success" });
        });
      }
    },

    // 获取全部用户
    onload() {
      apiGetAgentSum({}).then((res) => {
        console.log(res);
        // let mxid=res.Array._id
        this.tableData = res.res;

        this.total = res.res.length;

        // 遍历获取到的数据
        for (let i = 0; i < res.res.length; i++) {
          this.tableData[i].agency_level = "市";
        }
      });
    },

    // 分页
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`);
    // },

    // 点击钱包明细
    qbmx(data) {
      console.log(data);
      console.log(data.name);

      (this.dialogTableVisible = true),//点击时出现弹框
      
        apiGetWallettInfo({
          name: data.name,
        }).then((res) => {
          console.log(res);

          this.gridData = res.data.Wallet_details;

          this.total2 = res.data.Wallet_details.length;

          //遍历获取到的数据
          // 增加姓名和电话为点击对应的姓名和电话
          var newname = "";
          var newphone = "";
          res.data.Wallet_details.forEach((el, index) => {
            el.newname = res.data.Sales_name;
            el.newphone = res.data.phone;

            // 判断inOrOut=1为收入，
            if (res.data.Wallet_details[index].inOrOut == 1) {
              res.data.Wallet_details[index].inOrOut = "收入";
            }
            if (res.data.Wallet_details[index].inOrOut == 0) {
              res.data.Wallet_details[index].inOrOut = "支出";
            }
          });
        });
    },
  },
  mounted() {
    // 接受WalletList.vue传过来的数据
    // console.log(this.tableData);
    Bus.$on("tabledata", (value) => {
      // console.log(value);
      this.tableData = value;
      for (let i = 0; i < value.length; i++) {
        this.tableData[i].agency_level = "市";
      }
    });

    // 接受大客户重置数据
    Bus.$on("tabledata3", (value) => {
      // console.log(value);
      this.tableData = value;
      for (let i = 0; i < value.length; i++) {
        this.tableData[i].agency_level = "市";
      }
    });

    // 接受合伙人重置数据
    Bus.$on("tabledata4", (value) => {
      // console.log(value);
      this.tableData = value;
      for (let i = 0; i < value.length; i++) {
        this.tableData[i].agency_level = "市";
      }
    });
  },

  computed:{
    // 总金额
    allJine2() {
      let num = 0;
      this.gridData.forEach((item) => {
        num += item.figure;
      });
      // console.log(num);
      return (this.alljine2 = num);
    }
  }
};
</script>

<style scoped>
@import "../../style/css/PartnerList.css";
</style>